<script setup lang="js">
import { queryAllCustomer } from '@/api/customerApi'
import { queryBackdown } from '@/api/backdownApi.js'
import { reactive } from 'vue';
import { queryNursingProject,queryNursingProjectByLevel } from '@/api/nurseApi.js'
// =: 客户的数据集
let khxxList = reactive([])
// -: 退住的信息
let backdownList = reactive([])
// - 客户信息的分页数据
let queryParam = reactive({
  pageInfoVo: {
    currentPage: 1,
    pageSize: 5,
    total: 0,
    pageNum: 0
  },
  customer: {
    customerName: "",
  }
})

// -: 客户信息列表
function getTableDate() {
  queryNursingProject(queryParam)
    .then(res => {
      console.log(res)
      khxxList.splice(0, khxxList.length)
      khxxList.push(...res.data.data)
      queryParam.pageInfoVo.currentPage = res.data.currentPage
      queryParam.pageInfoVo.pageSize = res.data.pageSize
      queryParam.pageInfoVo.total = res.data.total
      queryParam.pageInfoVo.pageNum = res.data.pageNum
      console.log(khxxList)
    })
}
getTableDate();

// - 退住信息的分页数据
let queryParamTZ = reactive({
  pageInfoVo: {
    currentPage: 1,
    pageSize: 5,
    total: 0,
    pageNum: 0
  }
})


// -: 客户信息列表
function getTZTableDate() {
    queryNursingProjectByLevel(queryParamTZ)
    .then(res => {
      console.log(res)
      khxxList.splice(0, backdownList.length)
      khxxList.push(...res.data.data)
      queryParamTZ.pageInfoVo.currentPage = res.data.currentPage
      queryParamTZ.pageInfoVo.pageSize = res.data.pageSize
      queryParamTZ.pageInfoVo.total = res.data.total
      queryParamTZ.pageInfoVo.pageNum = res.data.pageNum
      console.log(backdownList)
    })
}
getTZTableDate();

// 分页事件
// val:表示点击的页码数
function handleCurrentChange(val) {
  queryParam.pageInfoVo.currentPage = val;
  // 重新获取表格中的信息
  getTableDate();
}

// 点击上一页
// val:表示上一页的页码
function handlePrevClick(val) {
  queryParam.pageInfoVo.currentPage = val;
  // 重新获取表格中的信息
  getTableDate();
}

// 点击下一页
function handleNextClick(val) {
  queryParam.pageInfoVo.currentPage = val;
  // 重新获取表格中的信息
  getTableDate();
}

// 按钮的查询事件
function btnQuery() {
    getTableDate();
}
</script>

<template>
  <el-breadcrumb separator="/" style="margin-left: 70px;">
    <el-breadcrumb-item :to="{ path: '/' }">护理管理</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">护理项目</a></el-breadcrumb-item>
  </el-breadcrumb>

  <div class="common-layot" style="overflow-x: hidden;">
    <el-container style="margin-top: 25px;">
        <el-header>
        <div style="margin-left: 50px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="项目：">
                <el-input clearable v-model="queryParam.customer.customerName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button @click="btnQuery" type="primary">查询</el-button>
            </el-col>
          </el-row>
        </div>
      </el-header>

      <el-divider style="margin-left: 60px;"></el-divider>

      <el-main>
        <el-row :gutter="20">
          <el-col :span="9">
            <div class="table-main" style="margin-left: 50px;">
              <!-- 表格的标题 -->
              <div class="table-main-header">护理项目</div>
              <!-- 表格信息 -->
              <div class="table-main">
                <el-table
                  :data="khxxList"
                  border
                  style="width: 100%;color:black"
                  stripe
                >
                  <el-table-column align="center" type="index" label="序号" width="60" />
                  <el-table-column align="center" prop="serialNumber" label="编号" width="100"/>
                  <el-table-column align="center" prop="nursingName" label="名称"width="100" />
                  <el-table-column align="center" prop="servicePrice" label="价格" width="100"/>
                  <el-table-column align="center" prop="executionCycle" label="执行周次" width="100"/>
                  <el-table-column align="center" prop="executionTimes" label="执行次数" width="100"/>
                </el-table>
                <!-- 分页插件 -->
                <div style="margin-top: 20px;">
                  <el-pagination
                    background
                    :page-size="queryParam.pageInfoVo.pageSize"
                    :total="queryParam.pageInfoVo.total"
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange"
                    @prev-click="handlePrevClick"
                    @next-click="handleNextClick"
                  />
                </div>
              </div>
            </div>
          </el-col>

          <el-col :span="15">
            <div class="table-main" style="margin-right: 40px;">
              <div class="table-main-header" style="padding-left: 20px">护理项目（一级）</div>
              <!-- 表格 -->
              <el-table :data="khxxList" size="small">
                <el-table-column
                  align="center"
                  :index="indexMethodRecord"
                  type="index"
                  label="序号"
                  width="40"
                />
                <el-table-column align="center" prop="serialNumber" label="编号" width="100"/>
                  <el-table-column align="center" prop="nursingName" label="名称"width="150" />
                  <el-table-column align="center" prop="servicePrice" label="价格" width="150"/>
                  <el-table-column align="center" prop="executionCycle" label="执行周次" width="150"/>
                  <el-table-column align="center" prop="executionTimes" label="执行次数" width="100"/>
                  <el-table-column align="center" label="操作" width="100">
    <template #default="scope">
      <!-- 第一个按钮 -->
      <el-button type="primary" size="small" @click="handleEdit(scope.row)">X</el-button>
    </template>
  </el-table-column>
              </el-table>
              <!-- 分页插件 -->
              <div style="margin-top: 20px;">
                <el-pagination
                  background
                  :page-size="queryParamTZ.pageInfoVo.pageSize"
                  :total="queryParamTZ.pageInfoVo.total"
                  layout="prev, pager, next"
                  @current-change="handleCurrentChange"
                  @prev-click="handlePrevClick"
                  @next-click="handleNextClick"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="css" scoped>
.table-main {
  height: 600px;
  border: 1px solid #d4c5c5;
}

.table-main .table-main-header {
  height: 50px;
  background-color: #3ca2e0;
  color: #fff;
  font-size: 20px;
  font-family: "Microsoft YaHei";
  line-height: 50px;
}
</style>
